<template>

  <div class="gva-table-box">
    <div>
      <el-descriptions title="问卷信息"
                       border
                       :size="size">
        <el-descriptions-item label="问卷名称：">
          {{questionnaire.name}}</el-descriptions-item>
        <el-descriptions-item label="创建时间：">
          {{formatDate(questionnaire.CreatedAt)}}
        </el-descriptions-item>
        <el-descriptions-item v-if="questionnaire.endTime!=null&&questionnaire.endTime!=''"
                              label="截至时间：">
          {{formatDate(questionnaire.endTime)}}
        </el-descriptions-item>
        <el-descriptions-item v-if="questionnaire.endTime==null||questionnaire.endTim==''"
                              label="截至时间：">
          无
        </el-descriptions-item>
        <el-descriptions-item label="目前状态：">
          <div v-if="questionnaire.st == 1 && moment(questionnaire.endTime).isAfter(new Date())">
            收集进行中
          </div>
          <div v-else-if="questionnaire.st == 1 && moment(questionnaire.endTime).isBefore(new Date())">
            收集结束（截至日期已过）
          </div>
          <div v-else-if="questionnaire.st == 1 && questionnaire.endNumber != 0 && questionnaire.endNumber == questionnaire.number">
            收集结束（收集人数已满）
          </div>
          <div v-else-if="questionnaire.st == 0 && questionnaire.number != 0">
            收集结束（收集已经手动结束）
          </div>
          <div v-else>
            未开始
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="收集数:">
          {{questionnaire.number}}
        </el-descriptions-item>
        <el-descriptions-item v-if="questionnaire.endNumber!=0"
                              label="问卷人数上限：">
          {{questionnaire.endNumber}}
        </el-descriptions-item>
        <el-descriptions-item v-if="questionnaire.endNumber==0"
                              label="问卷人数上限：">
          无限制
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="margin-top:80px">
      <el-descriptions title="问卷地址"
                       border
                       :size="size">
      </el-descriptions>
      {{url}}
    </div>
    <div style="margin-top:80px">
      <el-descriptions title="发送邀请"
                       border
                       :size="size">
      </el-descriptions>
      <el-form label-position="top"
               label-width="100px"
               :model="invitationForm"
               style="max-width: 460px">
        <el-form-item label="短信标题：">
          <el-select v-model="invitationForm.msg"
                     placeholder="Select">
            <el-option v-for="item in emailList"
                       :key="item.ID"
                       :label="item.name"
                       :value="item.msg" />
          </el-select>
        </el-form-item>
      </el-form>
      <div v-if="invitationForm.msg!=''">
        <el-card>
          <el-descriptions title="短信内容"
                           border
                           :size="size">
          </el-descriptions>
          <div style="white-space:pre-line">{{(invitationForm.msg)}}
          </div>
        </el-card>
        <div style="text-align: center;margin-top:10px">
          <el-popconfirm title="是否发送？"
                         @confirm="saveSetting">
            <template #reference>
              <el-button type="primary"
                         size="large"
                         plain>发送短信
              </el-button>
            </template>
          </el-popconfirm>

        </div>
      </div>
    </div>
    <div style="margin-top:80px">
      <el-descriptions title="问卷属性设置"
                       border
                       :size="size">
      </el-descriptions>
      <el-form inline="true"
               style="margin-top:10px">
        <div>
          <div> 回答限制：</div>
          <div style="margin:20px;margin-left:50px">
            <div style="display: flex;flex-flow: column nowrap;align-items: flex-start;">
              <el-checkbox v-model="settingForm.phoneIs"
                           :true-label="1"
                           :false-label="0"
                           size="large">手机号码登记</el-checkbox>
              <el-checkbox v-model="settingForm.phoneSMSIs"
                           :true-label="1"
                           :false-label="0"
                           size="large">手机号码短信验证</el-checkbox>
              <el-checkbox v-model="settingForm.phoneOneIs"
                           :true-label="1"
                           :false-label="0"
                           size="large">一个手机号码只能答题一次</el-checkbox>
              <el-checkbox v-model="settingForm.phonePeopleIs"
                           :true-label="1"
                           :false-label="0"
                           size="large">只有指定电话号码人员才能答题</el-checkbox>
              <!-- <el-checkbox label="指定IP段作答"
                           size="large" /> -->
              <el-checkbox v-model="settingForm.pageIs"
                           :true-label="1"
                           :false-label="0"
                           size="large">一页十题（答完10题才能进入下一页答题）</el-checkbox>
            </div>
          </div>
          <div style="text-align: center;">
            <el-popconfirm title="是否保存？"
                           @confirm="saveSetting">
              <template #reference>
                <el-button type="primary"
                           size="large"
                           plain>保存

                </el-button>
              </template>
            </el-popconfirm>

          </div>
        </div>

      </el-form>
    </div>
  </div>
</template>

<script  setup >

import Mean from '@/view/questionnaireInfo/a-menu.vue'
import {
  findQuestionnaireByUuid,
} from '@/api/questionnaire'
import {
  findQuestionnaireSetting,
  updateQuestionnaireSetting
} from '@/api/questionnaireSetting'

import {
  getEmailTemplateList
} from '@/api/emailTemplate'

import moment from 'moment'
// 全量引入格式化工具 请按需保留
import {
  getDictFunc,
  formatDate,
  formatBoolean,
  filterDict,
  ReturnArrImg,
} from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, nextTick, resolveDirective, computed } from 'vue'
import { useRoute, useRouter } from "vue-router"
const { query, params } = useRoute();   //2.在跳转页面定义router变量，解构得到指定的query和params传参的参数
defineOptions({
  name: 'DetailedInfo',
})



const size = ref('large')
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})


const router = useRouter()
const uuid = ref(router.currentRoute.value.query.uuid)
const questionnaire = ref({})

const queryQuestinnaire = async () => {
  const data = await findQuestionnaireByUuid({ "uuid": uuid.value })
  questionnaire.value = data.data.requestionnaire
}
queryQuestinnaire()


//问卷限制设置
const settingForm = ref({})

const getSetting = async () => {
  const data = await findQuestionnaireSetting({ "questionnaireUuid": uuid.value })
  settingForm.value = data.data.requestionnaireSetting
}
getSetting()
const saveSetting = async () => {
  const data = await updateQuestionnaireSetting({ "questionnaireUuid": uuid.value, ...settingForm.value })
  if (data.code === 0) {
    ElMessage({
      type: 'success',
      message: '修改成功'
    })
  }
}

//邀请发送
const invitationForm = ref({
  "msg": ""
})
const emailList = ref([])
//获取所有的短信模板
const getEmailTemplate = async () => {
  const data = await getEmailTemplateList()
  emailList.value = data.data.list
}
getEmailTemplate()
//获取问卷网址
const url = ref(window.location.href.substring(0, window.location.href.indexOf("/questionnaireInfo/detailedInfo"))
  + "/questionnaireContent?" + "uuid=" + uuid.value)
</script>

<style scoped>
.el-checkbox {
  width: 40px;
  height: 40px;
  transform: scale(1.2);
}
</style>